<template>
    <el-container>
        <el-header height="20px" class="header_div">
            数据库比对结果展示
            <el-text class="mx-1" size="small">查看目标样本与数据库样本的步长关系，点击样本号即可查看目标样本与该数据库样本的比对结果</el-text>
        </el-header>
        <el-main>
            <div class="input_div">
                <el-input v-model="search" size="small" placeholder="请输入......" />
            </div>
            <div>
                <el-table :data="filterTableData" class="table_div" height="440">
                    <el-table-column prop="target_sample_id" label="样本名" />
                    <el-table-column prop="step_difference" label="步长" />
                    <el-table-column prop="database_sample_id" label="单倍群" />
                    <el-table-column label="处理">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                                导出
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <div class="footer_data">
                共&nbsp;{{ items }}&nbsp;项
            </div>
        </el-main>
    </el-container>
</template>

<script>
export default {
    name: 'com',
    data() {
        return {
            // 模拟数据
            data: [
                {
                    "target_sample_id": "MT-Target001",
                    "database_sample_id": "MT-DB001",
                    "step_difference": 3
                },
                {
                    "target_sample_id": "MT-Target001",
                    "database_sample_id": "MT-DB002",
                    "step_difference": 7
                },
                {
                    "target_sample_id": "MT-Target002",
                    "database_sample_id": "MT-DB001",
                    "step_difference": 2
                },
                {
                    "target_sample_id": "MT-Target002",
                    "database_sample_id": "MT-DB002",
                    "step_difference": 5
                },
                {
                    "target_sample_id": "MT-Target003",
                    "database_sample_id": "MT-DB003",
                    "step_difference": 4
                },
                {
                    "target_sample_id": "MT-Target003",
                    "database_sample_id": "MT-DB004",
                    "step_difference": 9
                },
                {
                    "target_sample_id": "MT-Target004",
                    "database_sample_id": "MT-DB003",
                    "step_difference": 1
                },
                {
                    "target_sample_id": "MT-Target004",
                    "database_sample_id": "MT-DB004",
                    "step_difference": 6
                },
                {
                    "target_sample_id": "MT-Target005",
                    "database_sample_id": "MT-DB005",
                    "step_difference": 8
                },
                {
                    "target_sample_id": "MT-Target005",
                    "database_sample_id": "MT-DB006",
                    "step_difference": 3
                },
                {
                    "target_sample_id": "MT-Target005",
                    "database_sample_id": "MT-DB005",
                    "step_difference": 8
                },
                {
                    "target_sample_id": "MT-Target005",
                    "database_sample_id": "MT-DB006",
                    "step_difference": 3
                },
                {
                    "target_sample_id": "MT-Target005",
                    "database_sample_id": "MT-DB005",
                    "step_difference": 8
                },
                {
                    "target_sample_id": "MT-Target005",
                    "database_sample_id": "MT-DB006",
                    "step_difference": 3
                },
            ],
            // 搜索项
            search: null,
        }
    },
    computed: {
        // 返回数据项
        items() {
            return this.data.length;
        },
        // 处理搜索项与模拟数据中对应的数据
        filterTableData() {
            return this.data.filter(
                (data) =>
                    !this.search ||
                    data.target_sample_id.toLowerCase().includes(this.search.toLowerCase())
            );
        },
    },
}
</script>

<style scoped>
.footer_data {
    margin: 2%;
    font-size: small
}

.input_div {
    width: 180px;
    margin-bottom: 20px;
}

.header_div {
    font-size: larger;
}

.table_div {
    width: 100%
}
</style>
